<template>
  <div class="create-public-success-item">
    <div class="success-box">
      <div class="success-wrapper">
        <div class="back-manage-box">
          <span @click="goManage"><icon-svg name="leftArrow"></icon-svg> 文章管理</span>
        </div>
        <div class="article-info-box">
          <div class="title">{{ articleObj.title }}</div>
          <div class="desc">
            {{ articleObj.description }}
          </div>
          <div class="text">每一次分享都是自己的提高</div>
        </div>
        <div class="status-box">
          <span @click="watchArticle"><i class="el-icon-success"></i> 发布成功并查看文章</span>
          <span @click="againEdit"><i class="el-icon-edit"></i> 重新编辑</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['articleObj'],
  methods: {
    goManage() {
      this.$router.replace({ name: 'manage-edit-content' })
    },
    watchArticle() {
      console.log(this.articleObj)
      this.$router.replace({ name: 'blog-details', params: { id: this.articleObj.id } })
    },
    againEdit() {
      this.$emit('changeShowSuccess', { show: false })
    }
  }
}
</script>

<style lang="scss">
#modules-blog-create {
  .create-public-success-item {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 888;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    .success-box {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
      width: 600px;
      height: auto;
      border: none;
      .success-wrapper {
        padding: 24px 24px 0;
        .back-manage-box {
          color: #3399ea;
          font-size: 14px;
          text-decoration: inherit;
          cursor: pointer;
        }
        .article-info-box {
          margin-top: 20px;
          margin-bottom: 64px;
          background-color: #f5f6f7;
          padding: 8px;
          .title {
            font-size: 18px;
            color: #474747;
            margin-bottom: 8px;
            padding-bottom: 0;
            margin-top: 16px;
            letter-spacing: 0;
            line-height: 30px;
            word-break: break-all !important;
          }
          .desc {
            font-size: 14px;
            color: #999;
            margin: 8px 0;
          }
          .text {
            font-size: 14px;
            color: #6b6b6b;
            text-align: right;
          }
        }
        .status-box {
          padding-bottom: 32px;
          font-size: 18px;
          letter-spacing: 0;
          line-height: 32px;
          overflow: hidden;
          span {
            font-size: 14px;
            display: inline-block;
            margin-left: 16px;
            color: #3399ea;
            cursor: pointer;
            .el-icon-success {
              color: #67c23a;
            }
            .el-icon-edit {
              color: #e6a23c;
            }
          }
        }
      }
    }
  }
}
</style>
